<template>
  <div class="map-chart">
    <div>人员流动监测</div>
    <div id="map"></div>
  </div>
</template>

<script>
import yangzhou from '../../assets/yangzhou'

export default {
  name: 'Map',
  data () {
    return {
      geoCoordMap: {
        宝应县: [119.448539, 33.220324],
        高邮市: [119.497865, 32.830326],
        广陵区: [119.554852, 32.344708],
        江都区: [119.69265, 32.535752],
        仪征市: [119.186869, 32.392137],
        邗江区: [119.397777, 32.377899]
      },
      mapData: [
        { name: '宝应县', value: 1199 },
        { name: '高邮市', value: 1239 },
        { name: '广陵区', value: 1052 },
        { name: '江都区', value: 1199 },
        { name: '仪征市', value: 1189 },
        { name: '邗江区', value: 1152 }
      ],
      geoGpsMap: {
        1: [119.448539, 33.220324],
        2: [119.497865, 32.830326],
        3: [119.554852, 32.344708],
        4: [119.69265, 32.535752],
        5: [119.186869, 32.392137],
        6: [119.397777, 32.377899]
      }
    }
  },
  mounted () {
    this.drawMap()
  },
  methods: {
    drawMap () {
      let mapChart = this.$echarts.init(document.getElementById('map'))

      this.$echarts.registerMap('yangzhou', yangzhou)

      let option = {
        visualMap: {
          show: true
          // color: ['#d9b16d', '#d99f0c', '#e66d07', '#b300ed', '#7044da', '#6c00ec', '#1849ec', '#00a3ec']
        },
        geo: {
          show: true,
          map: 'yangzhou',
          roam: true,
          center: [119.7, 32.9],
          zoom: 1.3, // 默认显示级别
          scaleLimit: {
            min: 0,
            max: 3
          }, // 缩放级别
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        // 控制中心点大小
        series: [
          {
            type: 'map',
            map: 'yangzhou',
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: true, // 存在legend时显示
            roam: true,
            itemStyle: {},
            animation: false,
            data: this.mapData
          },
          // 动画
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(
              this.mapData
                .sort(function (a, b) {
                  return b.value - a.value
                })
                .slice(0, 20)
            ),
            symbolSize: function (val) {
              return 10
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return '{fline|地点：' + params.name + '}\n{tline|' + (params.name || '发生xx集件') + '}'
                },
                position: 'top',
                backgroundColor: 'rgba(254,174,33,.8)',
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: '#f7fafb',
                rich: {
                  fline: {
                    padding: [0, 10, 10, 10],
                    color: '#ffffff'
                  },
                  tline: {
                    padding: [10, 10, 0, 10],
                    color: '#ffffff'
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#04B9FF',
                shadowBlur: 10,
                shadowColor: '#1DE9B6'
              }
            },
            zlevel: 1
          },
          // 飞线
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, // 箭头指向速度，值越小速度越快
              trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 3 // 图标大小
            },
            lineStyle: {
              normal: {
                color: '#04B9FF',
                width: 0.1, // 尾迹线条宽度
                opacity: 0.5, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            data: this.convertToLineData(
              this.mapData,
              this.geoGpsMap[Math.ceil(Math.random() * 6)]
            )
          }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut'
      }
      mapChart.setOption(option)
    },
    convertData (data) {
      let res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res
    },
    convertToLineData (data, gps) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        let dataItem = data[i]
        let fromCoord = this.geoCoordMap[dataItem.name]
        let toCoord = gps
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem.value
            },
            {
              coord: toCoord
            }
          ])
        }
      }
      return res
    }
  }
}
</script>

<style lang="less" scoped>
.map-chart {
  width: 100%;
  height: 100%;

  #map {
    height: calc(~"100% - 10px");
  }
}
</style>
